<template>
  <Button @click="handleAdd" style="margin-bottom: 8px">新增</Button>
  <Table :columns="columns" :data-source="dataSource" :scroll="{ x: 'max-content' }" bordered>
    <template #metricName="{ index }">
      <Select
        v-model:value="dataSource[index].metricName"
        size="small"
        :rules="[{ required: true, message: '请选择' }]"
      >
        {{ dataSource[index] }}
        <SelectOption v-for="policy in policiesList" v-bind:key="policy.metricId" :value="policy.metricId">
          {{ policy.metricName }}
        </SelectOption>
      </Select>
    </template>

    <template #policies="{ index }">
      <div class="md:flex">
        <Select v-model:value="dataSource[index].filter" size="small" :rules="[{ required: true, message: '请选择' }]">
          <SelectOption value="average"> 平均值</SelectOption>
          <SelectOption value="min"> 最小值</SelectOption>
          <SelectOption value="max"> 最大值</SelectOption>
          <SelectOption value="sum"> 求和值</SelectOption>
          <SelectOption value="variance"> 方差值</SelectOption>
        </Select>
        <div class="mx-1">在</div>
        <Select v-model:value="dataSource[index].period" size="small" :rules="[{ required: true, message: '请选择' }]">
          <SelectOption value="1"> 原始周期</SelectOption>
          <SelectOption value="300"> 监控周期5分钟</SelectOption>
          <SelectOption value="1200"> 监控周期20分钟</SelectOption>
          <SelectOption value="3600"> 监控周期1小时</SelectOption>
          <SelectOption value="14400"> 监控周期4小时</SelectOption>
          <SelectOption value="86400"> 监控周期24小时</SelectOption>
        </Select>
        <div class="mx-1">内</div>
        <Select
          v-model:value="dataSource[index].comparisonOperator"
          size="small"
          :rules="[{ required: true, message: '请选择' }]"
        >
          <SelectOption value=">="> &gt;=</SelectOption>
          <SelectOption value="<="> &lt;=</SelectOption>
          <SelectOption value=">"> &gt;</SelectOption>
          <SelectOption value="<"> &lt;</SelectOption>
          <SelectOption value="="> =</SelectOption>
          <SelectOption value="><"> &gt;&lt;</SelectOption>
        </Select>
        <Input
          v-model:value="dataSource[index].value"
          size="small"
          style="height: 24px"
          :rules="[{ required: true, message: '请输入' }]"
        >
        </Input>
        <div class="md:w-1/3">{{ dataSource[index].unit }}且</div>
        <Select v-model:value="dataSource[index].count" size="small" :rules="[{ required: true, message: '请选择' }]">
          <SelectOption value="1"> 连续1个周期</SelectOption>
          <SelectOption value="2"> 连续2个周期</SelectOption>
          <SelectOption value="3"> 连续3个周期</SelectOption>
          <SelectOption value="4">连续4个周期</SelectOption>
          <SelectOption value="5">连续5个周期</SelectOption>
        </Select>
        <div class="mx-1">则</div>
        <Select
          v-model:value="dataSource[index].suppressDuration"
          size="small"
          :rules="[{ required: true, message: '请选择' }]"
        >
          <SelectOption value="0"> 只告警一次</SelectOption>
          <SelectOption value="300"> 每5分钟告警一次</SelectOption>
          <SelectOption value="600"> 每10分钟告警一次</SelectOption>
          <SelectOption value="900">每15分钟告警一次</SelectOption>
          <SelectOption value="1800">每30分钟告警一次</SelectOption>
          <SelectOption value="3600"> 每1小时告警一次</SelectOption>
          <SelectOption value="10800"> 每3小时告警一次</SelectOption>
          <SelectOption value="21600"> 每6小时告警一次</SelectOption>
          <SelectOption value="43200">每12小时告警一次</SelectOption>
          <SelectOption value="86400">每1天告警一次</SelectOption>
        </Select>
      </div>
    </template>

    <template #level="{ index }">
      <div>
        <Select v-model:value="dataSource[index].level" size="small" :rules="[{ required: true, message: '请选择' }]">
          <SelectOption value="1"> 紧急</SelectOption>
          <SelectOption value="2"> 重要</SelectOption>
          <SelectOption value="3">次要</SelectOption>
          <SelectOption value="4">提示</SelectOption>
        </Select>
      </div>
    </template>

    <template #action="{ index }">
      <Popconfirm v-if="dataSource.length" title="Sure to delete?" @confirm="onDelete(index)">
        <a>Delete</a>
      </Popconfirm>
    </template>
  </Table>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { Table, Input, Popconfirm, Button, SelectOption, Select } from 'ant-design-vue';
import { getCesMetricsList } from '/@/api/maintenance-center/alarm/alarm';

const columns = [
  {
    title: '指标名称',
    dataIndex: 'metricName',
    key: 'metricName',
    width: '200px',
    slots: { customRender: 'metricName' },
  },

  {
    title: '告警策略',
    dataIndex: 'policies',
    width: '1000px',
    slots: { customRender: 'policies' },
  },
  {
    title: '告警级别',
    dataIndex: 'level',
    width: '150px',
    slots: { customRender: 'level' },
  },
  {
    title: 'action',
    dataIndex: 'action',
    width: '100px',
    slots: { customRender: 'action' },
  },
];

interface DataItem {
  key: string;
  metricName: string;
  level: number;
  unit: string;
  policies: string;
}

const data: DataItem[] = [];

const props = defineProps({
  dimension: String,
  resourceType: String,
});
const dataSource = ref(data);

const count = computed(() => dataSource.value.length + 1);
const policiesList = ref([]);

onMounted(async () => {
  policiesList.value = await getCesMetricsList({
    dimension: props.dimension,
    namespace: props.resourceType,
  });
});

watch(
  () => dataSource.value,
  () => {
    dataSource.value.forEach((item) => {
      if (!(item.metricName === '' && item.metricName.includes('-'))) {
        item.unit = item.metricName.split('-')[1];
      }
    });
  },
  {
    deep: true,
  }
);

const handleAdd = () => {
  const newData = {
    key: count.value,
    metricName: '',
    policies: '',
    unit: '',
    level: '',
  };
  dataSource.value.push(newData);
};

const getTableData = () => {
  dataSource.value.forEach((item) => {
    item.metricName = item.metricName.split('-')[0];
  });
  return dataSource.value;
};

const setTableData = async (policies: any, dimension: string, resourceType: string) => {
  policiesList.value = await getCesMetricsList({
    dimension: dimension,
    namespace: resourceType,
  });
  dataSource.value = policies;
  policiesList.value.forEach((item) => {
    item.metricId = item.metricId.split('-')[0];
  });

  dataSource.value.forEach((item) => {
    if (item.suppressDuration === null) {
      item.suppressDuration = '0';
    }
  });
};

const onDelete = (index: string) => {
  dataSource.value.splice(index, 1);
};

defineExpose({ setTableData, getTableData });
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
